<template>
  <div id="regist">
    <div class="containner flex item-center justify-around"><img :src="require('@/assets/img/login_bg.png')"
        class="rounded box-shadow">
      <div>
        <div class="gray weight text-xl">注册新账户</div>
        <form>
          <div class="mt-20"><input type="text" v-model="customer.user_phone" placeholder="请输入手机号码"
              class="user_name hand"></div>
          <div class="mt-20"><input type="password" v-model="customer.user_password" placeholder="请输入账户密码"
              class="user_pass hand"></div>
          <div class="mt-20"><input type="password" v-model="customer.confirm_password" placeholder="请再次确认密码"
              class="user_pass hand"></div>
          <div class="mt-20"><input type="text" v-model="customer.user_name" placeholder="请输入用户昵称"
              class="user_name hand"></div>
          <div class="mt-20"><button type="button" class="btn-login hand" @click="customer_regist()"> 立即注册 </button></div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    computed: {
      // user_phone() {
      //   return this.$store.state.user_phone;
      // },
      // user_password() {
      //   return this.$store.state.user_password;
      // }
      // ...mapState({user_phone:'user_phone',user_password:'user_password'})
      // ...mapState(customer,['user_phone','user_password'])
      ...mapState(['customer'])
    },
    methods: {
      /* abc() {
        this.$store.display('regist')
      } */
      // ...mapActions({abc:'regist'}),
      // ...mapActions(['regist']),
      ...mapActions('customer', ['customer_regist']),

    }
  }
</script>

<style scoped>
  @import '../assets/css/regist.css';
</style>
